<template>
  <view class="container">
    <custom-navbar
      backText="配件信息"
      @back="goBack"
      :immersive="true"
    ></custom-navbar>
    <view class="container_header" :style="{ paddingTop: `${navbarHeight}px` }">
      <image
        class="container_header_bg"
        src="/static/images/mount_bg.png"
        mode="widthFix"
      />
    </view>
    <view class="container_main">
      <image
        class="container_main_search-icon"
        src="/static/images/mount_icon.png"
        mode="widthFix"
      />
      <view class="container_main_title">
        <image src="/static/images/mount_label_icon.png" mode="widthFix" />
        <view class="container_main_title_name">{{ productCode }}</view>
      </view>
      <uni-grid
        :highlight="false"
        :column="3"
        class="container_main_grid"
        :showBorder="false"
      >
        <uni-grid-item
          class="container_main_grid_item"
          v-for="(item, index) in list"
          :key="index"
        >
          <view
            class="container_main_grid_item_wrap"
            @click="handleClick(item)"
          >
            <view class="container_main_grid_item_wrap_name">{{
              item.partName
            }}</view>
            <view class="container_main_grid_item_wrap_row">
              <view>{{ item.processName ? item.processName : "" }}</view>
              <view
                >{{ item.updateTime ? formateUpdateTime(item.updateTime) : "" }}
              </view>
            </view>
          </view>
        </uni-grid-item>
      </uni-grid>
    </view>
  </view>
</template>

<script>
import { partDetail } from "@/api/home.js";
import { formatTime } from "@/utils/date.js";
import navbarMixin from "@/mixins/navbar.js";
export default {
  mixins: [navbarMixin],
  data() {
    return {
      list: [],
      params: {
        productId: "",
      },
      isLoading: false,
      noMoreData: false,
      productCode: "",
    };
  },
  onLoad(option) {
    if (option.productId) {
      this.params.productId = option.productId;
    }
    this.productCode = option.name;
    this.getPartDetail();
  },
  methods: {
    formateUpdateTime(time) {
      return formatTime(time, "MM-DD");
    },
    goBack() {
      uni.navigateBack({
        delta: 1, // 返回的页面数，如果delta大于现有页面数，则返回到首页
      });
    },

    getPartDetail() {
      if (this.isLoading) return;
      this.isLoading = true;
      uni.showLoading({
        title: "加载中",
      });
      partDetail(this.params)
        .then((res) => {
          this.isLoading = false;
          uni.hideLoading();
          console.log("mould---------" + res);
          this.list = res.content;
          // this.noMoreData = res.content.length < this.params.size;
        })
        .catch((e) => {
          uni.hideLoading();
          this.isLoading = false;
          uni.showToast({
            title: e.msg,
            icon: "none",
          });
        });
    },
    // loadMore() {
    //   console.log("loadmore");
    //   if (this.isLoading || this.noMoreData) return;
    //   this.params.page++;
    //   this.getPartDetail();
    // },
    handleClick(item) {
      uni.navigateTo({
        url:
          "/pages/mount/detail?mouldId=" +
          this.params.productId +
          "&productCode=" +
          this.productCode +
          "&partId=" +
          item.id +
          "&partName=" +
          item.partName,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

  &_header {
    height: 150rpx;
    background: linear-gradient(to bottom, #e7f4ff, #f4f5f9);
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    padding-top: 100rpx;

    &_bg {
      width: 100%;
      position: absolute;
      top: -50%;
      left: -30%;
    }

    &_icon {
      width: 200rpx;

      image {
        width: 100%;
        height: auto;
      }
    }
  }

  &_main {
    flex: 1;
    background-color: white;
    border-top-left-radius: 20rpx;
    border-top-right-radius: 20rpx;
    z-index: 999;
    overflow-y: auto;

    &_search-icon {
      width: 200rpx;
      position: absolute;
      right: 20rpx;
      top: 200rpx;
      z-index: 100;
    }

    &_title {
      margin: 20rpx 20rpx 40rpx 20rpx;
      display: flex;
      align-items: center;

      image {
        width: 30rpx;
      }

      &_name {
        margin-left: 10rpx;
      }
    }

    &_grid {
      height: 100%;

      &_item {
        display: flex;
        height: 200rpx !important;
        &_wrap {
          width: 200rpx;

          align-self: center;

          background: linear-gradient(to bottom, #e9f4fe, #ffffff);
          padding: 20rpx;
          box-shadow: 0 4px 12px 1rpx rgba(0, 0, 0, 0.2);
          border-radius: 10rpx;
          text-align: center;

          &_name {
            margin-top: 50rpx;
          }

          &_row {
            font-size: 26rpx;
            margin-top: 20rpx;
            display: flex;
            color: #999;
            justify-content: space-between;
            height: 40rpx;
          }
        }
      }
    }
  }
}
</style>
